<template>
  <div class="app-container" v-loading="loading">
    <incrementTeacherSource v-if="dialogVisible" @close="close" :dialogVisible="dialogVisible" />
    <div class="app-top">
      <div style="display: flex; margin-right: 20px">

      </div>


      <div>
        <el-button size="small" type="primary" @click="increment"
        >新增资源</el-button>
      </div>
    </div>
    <el-table
      :row-class-name="xxxTableRowClassName"
      v-loading="isLoading"
      :data="list"
      element-loading-text="Loading"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
      fit
      highlight-current-row
    >
      <template slot="empty">
        <span>暂无教学资源</span>
      </template>
      <!--      row-click 行点击事件-->

      <!--      <el-table-column align="center" prop="phoneNum" label="家长手机号">-->
      <!--        <template slot-scope="scope">-->
      <!--          <p v-for="(item, index) in scope.row.phoneNum" :key="index">-->
      <!--            {{ item | formatPhone }}-->
      <!--          </p>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        align="center"
        label="资源"
      >
        <template slot-scope="scope">
          <img v-if=" scope.row.type == 0" style="width: 100px;height: 100px" :src="$store.state.user.BASE_URL + scope.row.src" alt="">
          <video v-else width="100px" height="100px" style="width: 100px;height: 100px" :src="$store.state.user.BASE_URL + scope.row.src"></video>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
      >
        <template slot-scope="scope">

          <el-button
            plain
            @click="del($event,scope.row)"
            type="danger"
            size="small"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination-page @size="changeSize" @page="changePage" :total="total" />
  </div>
</template>

<script>
import {
  delTeacherSource,
  getTeacherList,
} from "@/api/teacherSource/index";
import incrementTeacherSource from "@/views/teacherSource/component/incrementTeacherSource";
export default {
  data() {
    return {
      list: null,
      isLoading: false,
      loading: false,
      value: false,
      dialogVisible: false,
      item: {},
      isEdit: false,
      model: {
        pageSize: 10,
        pageNum: 1,
      },
      total: -1,
      classSource: [],
    };
  },
  created() {
    this.fetchData();
  },

  methods: {
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    del(evt,row){
        let target = evt.target;
        this.$confirm("确定要删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if (target.nodeName == "SPAN") {
              target = evt.target.parentNode;
            }
            target.blur();
            let data = {
              pscId: row.pscId,
            };

            delTeacherSource({srcId:row.srcId}).then(response=>{
              if(response.code == 200){
                this.$message.success("删除成功");
                this.fetchData()
              }else{
                this.$message.error(response.message);
              }
            })
          })
          .catch(() => {
            if (target.nodeName == "SPAN") {
              target = evt.target.parentNode;
            }
            target.blur();
            this.$message({
              type: "info",
              message: "取消删除",
            });
          });

    },
    changeSize(size) {
      this.model.pageSize = size;
      this.fetchData();
    },
    closeSuccess() {
      this.model.pageNum = 1;
      this.model.pageSize = 10;
      this.dialogVisible = false;
      this.fetchData();
    },
    changePage(page) {
      this.model.pageNum = page;
      this.fetchData();
    },
    studentEdit(evt, row) {
      let target = evt.target;
      if (target.nodeName == "SPAN") {
        target = evt.target.parentNode;
      }
      target.blur();
      this.item = { ...row };
      this.isEdit = true;
      this.dialogVisible = true;
    },
    increment() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
      this.item = {};
      this.isEdit = false;
      this.fetchData()
    },
    async fetchData() {
      this.isLoading = true;
      const result = await getTeacherList({
        ...this.model,
        teacherId:this.$store.state.user.USER_INFO.id
      });
      if (result.code === 200) {
        this.list = result.result;
        this.total = result.total;
      }
      this.isLoading = false;
    },
  },
  components: {
    incrementTeacherSource
  },
};
</script>
<style scoped lang="scss">
.app-top {
  display: flex;
  justify-content: space-between;

  margin-bottom: 30px;
}
::v-deep .el-table__body-wrapper .statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
</style>
